建立一個全頁式導覽的網站

GitHub Star: 22,000
Javascripting Overall: 88%
瀏覽器: Chrome、Firefox和IE8+
RWD: 支援
License: MIT

《安裝》

• CDN

    <!-- jQuery.js v1.11.1 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  
    <!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/vendors/jquery.easings.min.jss"></script>
  
    <!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/vendors/scrolloverflow.min.js"></script>
  
    <!-- fullPage.js v2.9.5 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.css" rel="stylesheet"  />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.js"></script>
  

• npm

    $ npm install fullpage.js
  

• Bower

    $ bower install fullpage.js
  

《範例》

• 包含導覽列的全頁式導覽

    <div id="example">
    	<div class="section"><h1>A</h1></div>
    	<div class="section"><h1>B</h1></div>
    	<div class="section"><h1>C</h1></div>
    	<div class="section"><h1>D</h1></div>
    </div>
    <script>
    	$( "#example" ).fullpage({
    		// 參數設定[註1]
    		navigation: true, // 顯示導行列
    		navigationPosition: "right" // 導行列位置
    	});
    </script>
  

  [註1]

  參數	描述

  menu|自訂選單
  lockAnchors|關閉錨點
  anchors|錨點，可透過超連結的方式，連至該頁面
  navigation|顯示導行列
  navigationPosition|導行列位置
  navigationTooltips|當滑鼠移至導覽列按鈕時，顯示的提示文字，也可以透過data-tooltip，去設定
  showActiveTooltip|顯示該頁面的導覽列按鈕顯示文字
  css3|啟動CSS效果
  scrollingSpeed|滾動速度(單位:毫秒)
  autoScrolling|手動滾動時，無法停留在頁面與頁面中間
  fitToSection|手動滾動時，在頁面與頁面中間停留，會強制移到下一頁面
  fitToSectionDelay|手動滾動時，在頁面與頁面中間停留多久時間停留，會強制移到下一頁面(單位:毫秒)
  scrollBar|顯示捲軸
  easing|轉場動畫速度
  easingcss3|CSS3轉場動畫速度
  loopBottom|啟動底部循環
  loopTop|啟動頂部循環
  loopHorizontal|啟動水平循環

《延伸》

1. fullPage.js One Page Scroll sections Site Plugin
2. alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple